<template>
  <div class="edit-Notice-message">
    <el-dialog class="edit-notice-dialog" width="70%" title="修改通知信息" :visible.sync="editNoticeSync"
               :before-close="handleCloseDialog">
      <el-card shadow="never" v-loading="loading">
        <div class="edit-info">
          <el-form :inline="true" :model="noticeInfo" ref="editNoticeForm" :rules="editNoticeRules">
            <el-form-item label="通知标题：" prop="noticeTitle">
              <el-input size="small" placeholder="请输入通知标题" v-model="noticeInfo.noticeTitle" clearable/>
            </el-form-item>
          </el-form>
          <VueEditor maxLength="2000" placeholder="请输入通知正文..." class="editor"
                     v-model="noticeInfo.noticeContent" :editorToolbar="customToolbar"/>
        </div>
        <div class="dialog-footer">
          <el-button @click="handleCloseDialog">取 消</el-button>
          <el-button type="primary" @click="handleUpdateNotice">确认修改</el-button>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import store from '@/store'
import { VueEditor, Quill } from 'vue2-editor'
import { GetNoticeByIdApi, UpdateNoticeApi } from '@/request/message/notice-api'

let fontList = ['SimSun', '宋体', '楷体', '黑体', '幼圆']
Quill.imports['formats/font'].whitelist = fontList
Quill.register(Quill.imports['formats/font'])

let fontSizeList = [false, '10px', '12px', '14px', '16px', '20px', '24px']
Quill.imports['attributors/style/size'].whitelist = fontSizeList
Quill.register(Quill.imports['attributors/style/size'])
export default {
  computed: {
    listenEditNoticeId () {
      return store.state.NoticeEdit.editNoticeId
    },
    ...mapState({
      editNoticeSync: state => state.NoticeEdit.editNoticeSync,
      editNoticeId: state => state.NoticeEdit.editNoticeId
    })
  },
  data () {
    return {
      loading: false,
      noticeInfo: {
        id: null,
        noticeTitle: null,
        noticeContent: null
      },
      editNoticeRules: {
        noticeTitle: {
          required: true,
          message: '请输入通知标题',
          trigger: 'blur'
        }
      },
      customToolbar: [
        [{ size: fontSizeList }],
        [{ font: fontList }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'], //引用，代码块
        [{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
        [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
        [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
        [{ 'direction': 'rtl' }], // 文本方向
        [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
        // [{'font': []}], //字体
        [{ 'align': [] }], //对齐方式
        ['clean'], //清除字体样式
        // ['image', 'video'] //上传图片、上传视频
      ],
    }
  },
  methods: {
    async editInit (id) {
      this.loading = true
      let res = await GetNoticeByIdApi(id)
      if (res && res.code === 200) {
        this.noticeInfo.id = res.data.id
        this.noticeInfo.noticeTitle = res.data.noticeTitle
        this.noticeInfo.noticeContent = res.data.noticeContent
      } else {
        this.$message.error(res.msg ? res.msg : '加载失败')
      }
      this.loading = false
    },
    close () {
      store.commit('NoticeEdit/changeEditNoticeSync', false)
      store.commit('NoticeEdit/changeEditNoticeId', null)
    },
    handleCloseDialog () {
      this.$confirm('确定取消修改通知信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
    handleUpdateNotice () {
      this.$refs.editNoticeForm.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定添加该专家信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res = await UpdateNoticeApi(this.noticeInfo)
            if (res && res.code === 200) {
              this.$message.success('修改成功')
              this.close()
              this.noticeInfo =  {
                id: null,
                noticeTitle: null,
                noticeContent: null
              }
              this.$parent.init()
            }else {
              this.$message.error(res.msg?res.msg:"修改失败")
            }
          });
        }
      });
    }
  },
  watch: {
    listenEditNoticeId: {
      immediate: true,
      handler (val, old) {
        if (val) {
          this.editInit(val)
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
/deep/ .edit-notice-dialog .el-card{
  width: 80%;
  margin: 0 auto;
  height: 500px!important;
  overflow-y: scroll;
}
</style>
